色の最適化を備えたコンテナ

コンテンツ

まとめ

新しいColoredBoxウィジェットがフレームワークに追加されました。そしてそのContainerウィジェットはそれを使用するために最適化されていますユーザーが指定した場合colorの代わりにdecoration。

コンテクスト

を使用するのが非常に一般的ですContainer次のようなウィジェット:

return Container(color: Colors.red);

以前は、このコードにより、BoxDecoration実際に背景色をペイントします。のBoxDecorationウィジェットは、以外の多くのケースをカバーします背景色を塗るだけで、新しいものほど効率的ではありませんColoredBoxウィジェット、これは背景色のみをペイントします。

色に基づいてアサートしたいウィジェットのテストウィジェットツリー内のコンテナの以前はを見つけるためにBoxDecoration実際に手に入れる容器の色。今、彼らは、color財産でContainerそれ自体、BoxDecorationとして明示的に提供されましたdecoration財産。両方を指定してもエラーになりますcolorとdecorationにContainer。

移行ガイド

の色を主張するテストContainerまたは、それが作成されることを期待していましたBoxDecoration変更する必要があります。

移行前のコード:

testWidgets('Container color', (WidgetTester tester) async {
  await tester.pumpWidget(Container(color: Colors.red));

  final Container container = tester.widgetList<Container>().first;
  expect(container.decoration.color, Colors.red);
  // Or, a test may have specifically looked for the BoxDecoration, e.g.:
  expect(find.byType(BoxDecoration), findsOneWidget);
});

移行後のコード:

testWidgets('Container color', (WidgetTester tester) async {
  await tester.pumpWidget(Container(color: Colors.red));

  final Container container = tester.widgetList<Container>().first;
  expect(container.color, Colors.red);
  // If your test needed to work directly with the BoxDecoration, it should
  // instead look for the ColoredBox, e.g.:
  expect(find.byType(BoxDecoration), findsNothing);
  expect(find.byType(ColoredBox), findsOneWidget);
});

タイムライン

リリースされたバージョン: 1.15.4
安定版リリース: 1.17

参考文献

API ドキュメント:

Container
ColoredBox
BoxDecoration